<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 0;">
      <div class="ele-cell ele-cell-align-top ele-user-message">
        <el-menu
          :mode="mode"
          :default-active="active"
          class="ele-scrollbar-hide"
        >
          <el-menu-item index="all">
            <router-link to="/user/message">
              <span>全部消息</span>
              <el-badge
                v-if="unReadNumAll"
                :value="unReadNumAll"
                class="ele-badge-static"
              />
            </router-link>
          </el-menu-item>
          <el-menu-item index="notice">
            <router-link to="/user/message?type=notice">
              <span>系统通知</span>
              <el-badge
                v-if="unReadNum1"
                :value="unReadNum1"
                class="ele-badge-static"
              />
            </router-link>
          </el-menu-item>
          <el-menu-item index="message">
            <router-link to="/user/message?type=message">
              <span>用户私信</span>
              <el-badge
                v-if="unReadNum2"
                :value="unReadNum2"
                class="ele-badge-static"
              />
            </router-link>
          </el-menu-item>
          <el-menu-item index="todo">
            <router-link to="/user/message?type=todo">
              <span>代办事项</span>
              <el-badge
                v-if="unReadNum3"
                :value="unReadNum3"
                class="ele-badge-static"
              />
            </router-link>
          </el-menu-item>
        </el-menu>
        <div class="ele-cell-content">
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :loading="loading"
            :columns="columns"
            :datasource="url"
            :selection.sync="selection"
            tool-class="ele-toolbar-actions"
            @refresh="query"
          >
            <template slot="toolbar">
              <el-button
                size="small"
                type="primary"
                @click="read"
                v-if="permission.includes('sys:mynotice:read')"
                >标记已读
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="readAll"
                v-if="permission.includes('sys:mynotice:allread')"
                >全部已读
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="removeBatch"
                v-if="permission.includes('sys:mynotice:batchdelete')"
                >删除消息
              </el-button>
            </template>
            <template slot="status" slot-scope="{ row }">
              <!-- //1=全部,2=安卓,3=ios,4=pad,5=ipad,6=pc', -->
              <el-button size="mini" v-if="row.status === 1" type="success"
                >已读
              </el-button>
              <el-button size="mini" v-if="row.status === 0" type="info"
                >未读
              </el-button>
            </template>
            <template slot="relevant_type" slot-scope="{ row }">
              <el-button
                size="mini"
                v-if="row.relevant_type === 0"
                type="success"
                >默认消息
              </el-button>
              <el-button
                size="mini"
                v-if="row.relevant_type === 1"
                type="success"
                >礼包预警消息
              </el-button>
              <el-button
                size="mini"
                v-if="row.relevant_type === 2"
                type="warning"
                >其他消息
              </el-button>
            </template>
            <template slot="action" slot-scope="{ row }">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-view"
                @click="view(row)"
                v-if="permission.includes('sys:mynotice:see')"
                >查看
              </el-link>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-s-promotion"
                @click="jumpPage(row)"
                v-if="
                  permission.includes('sys:mynotice:see') &&
                  row.relevant_type === 1
                "
                >补充库存
              </el-link>
              <el-popconfirm
                class="ele-action"
                title="确定要删除此消息吗？"
                @confirm="remove(row)"
              >
                <el-link
                  type="danger"
                  slot="reference"
                  :underline="false"
                  icon="el-icon-delete"
                  v-if="permission.includes('sys:mynotice:delete')"
                  >删除
                </el-link>
              </el-popconfirm>
            </template>
          </ele-pro-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "UserMessage",
  data() {
    return {
      url: "/notice.MyNotice/index",
      // 导航选中
      active: "all",
      // 加载状态
      loading: true,
      // 全部数据
      allData: [],
      // 列表显示数据
      data: [],
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
        },
        {
          prop: "id",
          label: "ID",
          minWidth: 45,
          align: "center",
          showOverflowTooltip: true,
        },
        {
          prop: "relevant_type",
          label: "相关业务",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 60,
          slot: "relevant_type",
        },
        {
          prop: "title",
          label: "标题",
          showOverflowTooltip: true,
          minWidth: 110,
        },
        {
          prop: "content",
          label: "标题内容",
          showOverflowTooltip: true,
          minWidth: 110,
        },
        {
          prop: "status",
          label: "状态",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 60,
          slot: "status",
        },
        {
          prop: "create_time",
          label: "创建时间",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          prop: "update_time",
          label: "更新时间",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          columnKey: "action",
          label: "操作",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 120,
          resizable: false,
          slot: "action",
        },
      ],
      // 列表选中数据
      selection: [],
      selectionIds: [],
      // 未读数据
      countData: [],
      unReadNumAll: 0,
      unReadNum1: 1,
      unReadNum2: 2,
      unReadNum3: 3,
      where: {
        type: "all",
      },
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    // 小屏幕水平导航
    mode() {
      return this.$store.state.theme.screenWidth < 768
        ? "horizontal"
        : "vertical";
    },
  },
  mounted() {
    const type = this.$route.query.type;
    if (type) {
      this.active = type;
      this.url = "/notice.MyNotice/index?type=" + this.active;
    }
    this.query();
  },
  // created() {
  //   this.query();
  // },

  methods: {
    /*
    页面跳转
     */
    jumpPage(row) {
      this.status(row);
      if (row.relevant_type === 1) {
        this.$router.push({
          path: "/box/activity/activityexchange",
          query: {
            id: row.relevant_id,
          },
        });
      }
    },
    /* 查询全部数据 */
    query() {
      this.$http
        .get("/notice.MyNotice/getCountData", { params: { type: this.active } })
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            this.countData = res.data.data;
            this.unReadNumAll = this.countData.all;
            this.unReadNum1 = this.countData.notice;
            this.unReadNum2 = this.countData.message;
            this.unReadNum3 = this.countData.todo;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    status(row) {
      this.$http
        .get("/notice.MyNotice/batchStatus", {
          params: { ids: [row.id], status: 1 },
        })
        .then((res) => {});
    },
    /* 切换消息类型 */
    changeType(index) {
      if (index) {
        this.active = index;
      }
      this.data = [].concat(this.allData);
      this.selection = [];
    },
    /* 查看 */
    view(row) {
      this.status(row);
      this.$alert(row.content, row.title, {
        showConfirmButton: false,
        dangerouslyUseHTMLString: true,
        customClass: "article-checkList",
        center: true,
        callback: () => {
          this.reload();
        },
      });
    },
    /* 删除单个 */
    remove(row) {
      this.$http
        .get("/notice.MyNotice/delete", {
          params: { id: row.id },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        return this.$message.error("请至少选择一条数据");
      }
      this.selection.forEach((d) => {
        this.selectionIds.push(d.id);
      });
      this.$confirm("确定要删除选中的消息吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$http
          .get("/notice.MyNotice/delete", {
            params: { id: this.selectionIds },
          })
          .then((res) => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.reload();
            }
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
        // this.query();
        this.reload();
      });
    },
    /* 标记已读 */
    read() {
      if (!this.selection.length) {
        return this.$message.error("请至少选择一条数据");
      }
      this.selection.forEach((d) => {
        this.selectionIds.push(d.id);
      });
      this.batchStatus(this.selectionIds);
      this.reload();
    },
    /* 全部标记已读 */
    readAll() {
      this.$confirm("确定要全部一键读取所有消息吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.batchStatus("all");
        // this.query();
        this.reload();
      });
    },
    batchStatus(params) {
      this.$http
        .get("/notice.MyNotice/batchStatus", {
          params: { ids: params, status: 1 },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.selectionIds = [];
          }
        })
        .catch((e) => {
          this.selectionIds = [];
          this.$message.error(e.message);
        });
    },

    //刷新表格
    reload() {
      this.query();
      this.active = this.$route.query.type;
      this.where.type = this.active;
      this.$refs.table.reload({ where: this.where });
    },
  },
  watch: {
    $route() {
      const type = this.$route.query.type;
      if (type) {
        this.active = type;
        this.url = "/notice.MyNotice/index?type=" + this.active;
      } else {
        this.url = "/notice.MyNotice/index?type=all";
      }
      this.query();
      this.reload();
    },
  },
};
</script>

<style scoped>
.article-checkList {
  padding-bottom: 15px;
  width: 1000px;
  max-height: 800px;
  min-height: 500px;
  overflow: scroll;
}

.article-checkList img {
  max-width: 900px;
}

.article-checkList video {
  max-width: 900px;
}

.ele-user-message ::v-deep .el-menu {
  width: 151px;
  flex-shrink: 0;
}

.ele-user-message .ele-cell-content {
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}

.ele-user-message .ele-badge-static {
  margin-left: 10px;
}

@media screen and (min-width: 768px) {
  .ele-user-message ::v-deep .el-menu .el-menu-item {
    text-align: right;
  }

  .ele-user-message ::v-deep .el-menu .el-menu-item:first-child {
    margin-top: 15px;
  }
}

@media screen and (max-width: 768px) {
  .ele-user-message {
    display: block;
  }

  .ele-user-message ::v-deep .el-menu {
    width: auto;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
  }

  .ele-user-message ::v-deep .el-menu .el-menu-item {
    height: 45px;
    line-height: 45px;
    padding: 0 5px;
    display: inline-block;
    float: none;
  }

  .ele-user-message .ele-badge-static {
    margin-left: 3px;
  }
}
</style>
